<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title>控制器切换</title>
		<style type="text/css">
			html,
			body {
				margin: 0;
				height: 100%;
			}

			canvas {
				display: block;
			}

			#DevBtn {
				position: absolute;
				top: 10px;
				right: 10px;
			}
		</style>
	</head>
	<body>
		<button id="DevBtn"><b>关闭</b>陀螺仪</button>
	</body>

	<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="./js/three.min.js"></script>
	<script type="text/javascript" src="./js/DeviceOrientationControls.js"></script>
	<script type="text/javascript" src="./js/OrbitControls.js"></script>
	<script src="js/vconsole.min.js"></script>
	<script>
		console.log(THREE.REVISION)
		$(function() {
			draw();

			$("#DevBtn").click(() => {
				controlsState = !controlsState;
				if (controlsState) {
					$(this).find("b").html("开启");
				} else {
					$(this).find("b").html("关闭");
				}
				initControl();
				console.log(controlsState)
				console.log(controls)
			})

		})
		var renderer, camera, scene;
		var controls;
		//切换控制器
		var controlsState = true;
var vConsole = new VConsole();

		function initRender() {
			renderer = new THREE.WebGLRenderer({
				antialias: true
			});
			renderer.setSize(window.innerWidth, window.innerHeight);
			//告诉渲染器需要阴影效果
			renderer.shadowMap.enabled = true;
			renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap
			document.body.appendChild(renderer.domElement);
		}

		function initCamera() {
			camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
			camera.position.set(0, 100, 200);
			camera.lookAt(new THREE.Vector3(0, 0, 0));


		}

		function initScene() {
			scene = new THREE.Scene();
			scene.background = new THREE.Color(0xa0a0a0);
		}


		function initRoom() {
			var sphereGeometry = new THREE.SphereGeometry(500, 60, 40);

			sphereGeometry.scale(1, 1, -1);

			const texture = new THREE.TextureLoader().load('img/test.jpg')

			var sphereMaterial = new THREE.MeshBasicMaterial({
				map: texture
			});


			var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
			// THREE.Cache.clear();
			scene.add(sphere);

		}



		function initControl() {
			if (controlsState) {
				if (controls) {
					controls.dispose()
				}
				controls = new THREE.OrbitControls(camera, renderer.domElement);

			} else if (controlsState === false) {

				if (controls) {
					controls.dispose()
				}
				controls = new THREE.DeviceOrientationControls(camera);
				controls.connect();
			}

		}

		function render() {

			controls.update();

			renderer.render(scene, camera);
		}

		function onWindowResize() {

			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
			renderer.setSize(window.innerWidth, window.innerHeight);

		}

		function animate() {
			//更新控制器
			render();


			requestAnimationFrame(animate);
		}

		function draw() {
			initRender();
			initScene();
			initCamera();
			initRoom()
			initControl();


			animate();
			window.onresize = onWindowResize;

		}
	</script>
</html>
